import {
  delectAuditDeleteApi,
  delectAuditPassApi,
  delectAuditRejectApi,
  getAuditListApi,
} from '@/services/api';
import { STATUS_TAG } from '@/utils/common';
import type { ActionType } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';
import { useAccess } from '@umijs/max';
import {
  Button,
  Image,
  Popconfirm,
  Space,
  Tag,
  Typography,
  message,
} from 'antd';
import { isEqual } from 'lodash';
import React, { useRef } from 'react';

const Auditing: React.FC = () => {
  const actionRef = useRef<ActionType>();
  const {
    merchan_manage_permissions_audit_btn,
    merchan_manage_permissions_delete,
  } = useAccess() as any;

  const columns: any = [
    {
      title: '姓名',
      dataIndex: 'name',
      hideInTable: true,
    },
    {
      title: '申请时间',
      hideInSearch: true,
      width: 120,
      dataIndex: 'created',
      valueType: 'dateTime',
    },
    {
      title: '姓名',
      dataIndex: 'name',
      hideInSearch: true,
      width: 120,
    },
    {
      title: '电话',
      dataIndex: 'mobile',
      hideInSearch: true,
      width: 120,
    },
    {
      title: '密码',
      dataIndex: 'password',
      hideInSearch: true,
      width: 120,
      copyable: true,
      render: (text, record) => {
        return (
          <Typography.Paragraph
            style={{
              marginBottom: 0,
            }}
            copyable={{ text: record?.password }}
          >
            ********
          </Typography.Paragraph>
        );
      },
    },
    {
      title: '附件图片',
      tooltip: '营业执照，身份证',
      dataIndex: 'online',
      hideInSearch: true,
      render: (_, _record) => {
        const { front, license, opposite } = _record || {};
        return (
          <Space>
            {front && <Image src={front} width={50} height={50}></Image>}
            {license && <Image src={license} width={50} height={50}></Image>}
            {opposite && <Image src={opposite} width={50} height={50}></Image>}
          </Space>
        );
      },
    },
    {
      title: '审核状态',
      dataIndex: 'status',
      hideInSearch: true,
      width: 120,
      render: (_, _record) => {
        return (
          <Tag color={STATUS_TAG.COLOR[_record?.status]}>
            {STATUS_TAG.LABEL[_record?.status]}
          </Tag>
        );
      },
    },

    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      fixed: 'right',
      width: 160,
      render: (text: any, record: any) => [
        merchan_manage_permissions_audit_btn && (
          <Popconfirm
            key="view"
            title={`确定审核通过该用户- ${record?.name}`}
            onConfirm={async () => {
              try {
                await delectAuditPassApi({
                  id: record?.id,
                });
                message.success('审核成功');
                actionRef.current?.reload();
              } catch (error) {}
            }}
            okText="Yes"
            cancelText="No"
          >
            <Button
              className="_common_card_left_item_btn"
              type="link"
              disabled={record?.status !== 0}
            >
              审核通过
            </Button>
          </Popconfirm>
        ),
        merchan_manage_permissions_audit_btn && (
          <Popconfirm
            key="bofan"
            title={`确定驳回该用户- ${record?.name}`}
            onConfirm={async () => {
              try {
                await delectAuditRejectApi({
                  id: record?.id,
                });
                message.success('驳回成功');
                actionRef.current?.reload();
              } catch (error) {}
            }}
            okText="Yes"
            cancelText="No"
          >
            <Button
              className="_common_card_left_item_btn"
              type="link"
              danger
              disabled={record?.status !== 0}
            >
              驳回
            </Button>
          </Popconfirm>
        ),
        merchan_manage_permissions_delete && (
          <Popconfirm
            key="bofan"
            title={`确定删除该用户- ${record?.name}`}
            onConfirm={async () => {
              try {
                await delectAuditDeleteApi({
                  id: record?.id,
                });
                message.success('删除成功');
                actionRef.current?.reload();
              } catch (error) {}
            }}
            okText="Yes"
            cancelText="No"
          >
            <Button className="_common_card_left_item_btn" type="link" danger>
              删除
            </Button>
          </Popconfirm>
        ),
      ],
    },
  ];

  return (
    <>
      <ProTable
        bordered
        columns={columns}
        actionRef={actionRef}
        cardBordered
        scroll={{ x: 1200 }}
        request={async (_parame) => {
          const { pageSize, current, ...ret } = _parame;
          const { data, count } = await getAuditListApi({
            page: current,
            size: pageSize,
            ...ret,
          });
          return {
            data: data?.list ?? [],
            success: true,
            total: data?.count,
          };
        }}
        rowKey="id"
        search={{
          labelWidth: 'auto',
        }}
        options={{
          setting: {
            listsHeight: 400,
          },
        }}
        pagination={{
          defaultPageSize: 10,
        }}
        dateFormatter="string"
        tableAlertRender={({ selectedRowKeys, onCleanSelected }) => {
          return (
            <Space size={24}>
              <span>
                已选 {selectedRowKeys.length} 项
                <a style={{ marginInlineStart: 8 }} onClick={onCleanSelected}>
                  取消选择
                </a>
              </span>
            </Space>
          );
        }}
        tableAlertOptionRender={({ selectedRowKeys }) => {
          return (
            <Space size={16}>
              <Popconfirm
                key="view"
                title="确定删除该用户"
                onConfirm={async () => {
                  try {
                    message.success('删除成功');
                    actionRef.current?.reload();
                    actionRef?.current?.clearSelected?.();
                  } catch (error) {}
                }}
                okText="Yes"
                cancelText="No"
              >
                <Button danger type="link">
                  批量删除
                </Button>
              </Popconfirm>
              {/* <a>导出数据</a> */}
            </Space>
          );
        }}
      />

      {/* {clientDrawerParams.open && (
        <ClientDrawer
          open={clientDrawerParams.open}
          info={clientDrawerParams.info}
          close={() => {
            setclientDrawerParams({
              open: false,
              info: '',
            });

            actionRef.current?.reload();
          }}
        ></ClientDrawer>
      )} */}
    </>
  );
};

export default React.memo(Auditing, (prev, next) => isEqual(prev, next));
